


export class Draw{
    _instance=null;    
    constructor(canvas,opt){
        this.canvas = canvas

        this.context = this.canvas.getContext('2d')

   
        this.opt = opt
        
        // this.context.rect(20,20,150,100);
        // this.context.stroke();
    }
    on(name,call){
        this.canvas.addEventListener(name,call)
    }
    static init(canvas){
        if(!this._instance){
            this._instance = new Draw(canvas)
        }
        return this._instance
    }

    static createCanvas(opt){
        const canvasName = opt.canvasName||'graph'
        const graph = document.getElementById(canvasName);
        if(graph){
            graph.remove()
            
        }

        const canvas = document.createElement('canvas');
        canvas.width = opt.width
        canvas.height=opt.height
        canvas.id=canvasName

        canvas.className="graph-canvas"
        let draw = document.getElementById(opt.el)



        if(!draw){
            const ele = document.createElement('div')
            ele.id=opt.el
            ele.hidden =opt.show==false?true:false
            document.body.append(ele)
            draw = ele
        }

        draw.appendChild(canvas)

       
        return  new Draw(canvas,{...opt,draw:draw})

    }
    toDataURL(){
        return this.canvas.toDataURL()
    }
    putImageData(data,x,y){ 

        this.context.putImageData(data,x,y)
    }

    getImageDatas(x=0,y=0,w,h){

        w=w||this.canvas.width
        h=h||this.canvas.height
    

        const data= this.context.getImageData(x,y,w,h)
        return data
    }

    getImageData(opt){
        const data= this.context.getImageData(opt.x,opt.y,opt.w,opt.h)

        const _innerDraw =Draw.createCanvas({
            width:opt.w,
            height:opt.h,
            el:'inner-draw',
            canvasName:'photo-split',
            show:false
        })

        _innerDraw.putImageData(data,0,0)

        return _innerDraw.toDataURL()


    }
    drawRect(opt){
        this.context.lineWidth=opt.lineWidth||0.01
        this.context.strokeStyle=opt.color|| "#f0ff00"
        this.context.strokeRect(opt.x,opt.y,opt.w,opt.h);
    }
    drawGrid(opt){
        this.context.strokeStyle=opt.color|| "#f0ff00"
        this.context.lineWidth=0.01
        const size = parseInt(opt.size)
        const space = parseInt(opt.space)

        for(let i=0;i<this.canvas.width;i+=size){
            for(let j=0;j<this.canvas.height;j+=size){
                this.context.strokeRect(i,j,size,size);
            }
         
        }

    }
    mouseToCanvas(pos){
        let draw = this.opt.draw;

        let offestX = pos.x - draw.offsetLeft
        
        let offestY = pos.y - draw.offsetTop

        return {
            x:offestX+draw.scrollLeft,
            y:offestY+draw.scrollTop
        }
        // debugger
    }
    clear(){
        this.context.fillStyle="rgba(0,0,0,0)";
        this.context.fillRect(0,0, this.canvas.width,this.canvas.height);
    }
    drawImage(image){
        this.context.drawImage(image,0,0,image.width,image.height)
    }
}